<template>
	<view>
		<view class="item" :style="{'backgroundImage':`url(${item.image || 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'})`}" @click="navto">
			<view class="item-content">
				<text class="iconfont icon-bofang text-white item-play"></text>
				<view class="flex justify-between item-desc">
					<view>
						<text class="iconfont icon-huo text-white fire-icon"></text>
						<text>70</text>
					</view>
					<text>03:55</text>
				</view>
			</view>
		</view>
		<view class="padding-sm bg-white">
			<view class="text-bold text-lg">
				你的出现，成为我永恒驻足的原因
			</view>
			<view class="text-sm text-gray margin-tb-sm line-height">
				与你再次相遇的十一月，手握咖啡般温暖的恋爱，记忆停留在了，你最明亮的眼眸里......
			</view>
			<view class="flex justify-between align-center text-gray">
				<text>7月21日</text>
				<view>
					<text class="iconfont icon-arrow-down margin-right-xs"></text>
					<text>展开</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			navto(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.item{
	position: relative;
	height: 360upx;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	&-play{
		position: absolute;
		font-size: 120upx;
		line-height: 120upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%)
	}
	&-content{
		position: relative;
		height: 100%
	}
	&-desc{
		position: absolute;
		bottom: 0;
		left: 30upx;
		right: 30upx;
		color: white;
		line-height: 60upx;
		height: 60upx;
	}
}
.fire-icon{
	font-size: 40upx;
	line-height: 40upx;
	margin-right: 10upx;
}
.line-height{
	line-height: 40upx;
}
</style>
